<template>
<view class="container">
  <scroll-view class="groupon-list" scroll-y="true" :scroll-top="scrollTop">

    <view v-for="(item, index) in grouponList" :key="index" class="item">
      <navigator :url="'/pages/goods/goods?id=' + item.goods.id">
        <image class="img" :src="item.goods.picUrl" background-size="cover"></image>
        <view class="right">
          <view class="text">
            <view class="header"> 
              <text class="name jhx_f7">{{item.goods.name}}</text>
              <view class="capsule-tag">
                <zan-capsule color="#e67249" leftText="团购" :rightText="item.groupon_member"></zan-capsule>
              </view>
            </view>
            <text class="desc jhx_f5">{{item.goods.brief}}</text>
            <view class="price">
              <view class="priceTg jhx_f8">￥{{item.groupon_price}}</view>
              <view class="counterPrice jhx_f9">￥{{item.goods.counterPrice}}</view>
              <view class="brokerage" v-if="isAgent && item.goods.brokeragePrice>0.01">赚￥{{item.goods.brokeragePrice}}</view>
              <view class="brokerage" v-else>立即参团</view>
            </view>
          </view>
        </view>
      </navigator>
    </view>

    <view class="page" v-if="showPage">
      <view :class="'prev ' + ( page <= 1 ? 'disabled' : '')" @tap="prevPage">上一页</view>
      <view :class="'next ' + ( (count / size) < page ? 'disabled' : '')" @tap="nextPage">下一页</view>
    </view>
  </scroll-view>
</view>
</template>

<script>
// pages/groupon/grouponList/grouponList.js
var util = require("../../../utils/util.js");
var api = require("../../../config/api.js");
var app = getApp();
import zanCapsule from "../../../lib/zanui-weapp/capsule/index";

export default {
  data() {
    return {
      grouponList: [],
      page: 1,
      size: 10,
      count: 0,
      scrollTop: 0,
      isAgent: false,
      showPage: false
    };
  },

  components: {
    zanCapsule
  },
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.getGrouponList();
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    // 页面渲染完成
    let that = this;
    let userInfo = uni.getStorageSync('userInfo');

    if (userInfo && userInfo.userLevel == 2) {
      that.setData({
        isAgent: true
      });
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    let that = this;
    let userInfo = uni.getStorageSync('userInfo');

    if (userInfo && userInfo.userLevel == 2) {
      that.setData({
        isAgent: true
      });
    }
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {},

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    getGrouponList: function () {
      let that = this;
      that.setData({
        scrollTop: 0,
        showPage: false,
        grouponList: []
      }); // 页面渲染完成

      uni.showToast({
        title: '加载中...',
        icon: 'loading',
        duration: 2000
      });
      util.request(api.GroupOnList, {
        page: that.page,
        size: that.size
      }).then(function (res) {
        if (res.errno === 0) {
          that.setData({
            scrollTop: 0,
            grouponList: res.data.data,
            showPage: true,
            count: res.data.count
          });
        }

        uni.hideToast();
      });
    },
    nextPage: function (event) {
      var that = this;

      if (this.page > that.count / that.size) {
        return true;
      }

      that.setData({
        page: that.page + 1
      });
      this.getGrouponList();
    },
    prevPage: function (event) {
      if (this.page <= 1) {
        return false;
      }

      var that = this;
      that.setData({
        page: that.page - 1
      });
      this.getGrouponList();
    }
  }
};
</script>
<style>
page, .container {
  width: 750rpx;
  height: 100%;
  overflow: hidden;
  background: #f4f4f4;
}

.groupon-list {
  width: 750rpx;
  height: 100%;
  overflow: hidden;
  background: #f4f4f4;
}

.groupon-list .item {
  height: 244rpx;
  width: 100%;
  background: #fff;
  margin-bottom: 20rpx;
}

.groupon-list .img {
  margin-top: 12rpx;
  margin-right: 10rpx;
  float: left;
  width: 220rpx;
  height: 220rpx;
}

.groupon-list .right {
  float: left;
  height: 244rpx;
  width: 476rpx;
  display: flex;
  flex-flow: row nowrap;
}

.groupon-list .text {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  height: 244rpx;
  width: 476rpx;
}

.groupon-list .name {
  float: left;
  width: 330rpx;
  display: block;
  line-height: 42rpx;
  display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;
 overflow: hidden;
}

.groupon-list .capsule-tag {
  float: right;
  padding-right: 0rpx;
  padding-top: 8rpx;
}

.groupon-list .zan-capsule + .zan-capsule {
  margin-left: 6px;
}

.groupon-list .desc {
  margin-top: 20rpx;
  width: 476rpx;
  display: block;
  line-height: 38rpx;
}

.groupon-list .price {
  width: 476rpx;
  display: flex;
  line-height: 50rpx;
}
.groupon-list .priceTg {
  width: 35%;
}
.groupon-list .counterPrice {
  margin-left: 30rpx;
  text-decoration: line-through;
  width: 30%;
}

.groupon-list .brokerage {
  float: right;
  background: #e68d08;
  border-radius: 20rpx;
  color: #fff;
  min-width: 135rpx;
  text-align: center;
  height: 25px;
  line-height: 25px;
}

.page {
  width: 750rpx;
  height: 108rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.page view {
  height: 108rpx;
  width: 50%;
  float: left;
  font-size: 29rpx;
  color: #333;
  text-align: center;
  line-height: 108rpx;
}

.page .prev {
  border-right: 1px solid #d9d9d9;
}

.page .disabled {
  color: #ccc;
}

</style>